<template>
  <div class="cfgSystem">
    <el-menu theme="dark" class="el-menu-demo" mode="horizontal" menu-trigger="hover" @select="handleSelect"
             :router="isRoute" default-active="/">
      <el-menu-item index="/env"><span class="title">配置接入－{{currentEnv.name}}</span></el-menu-item>
      <el-submenu index="/env">
        <template slot="title">切换环境</template>
        <el-menu-item index="/daily">日常环境</el-menu-item>
        <el-menu-item index="/prepub">预发环境</el-menu-item>
        <el-menu-item index="/online">线上环境</el-menu-item>
      </el-submenu>
      <el-menu-item index="/appInfo">应用管理</el-menu-item>
      <el-menu-item index="/cfgtree">配置树管理</el-menu-item>
      <el-submenu index="/cfgMap">
        <template slot="title">配置集管理</template>
        <el-menu-item index="/findcfgMap">查询配置集</el-menu-item>
        <el-menu-item index="/addcfgMap">新增配置集</el-menu-item>
      </el-submenu>
      <el-menu-item index="/">配置步骤</el-menu-item>
      <el-menu-item index="" @click="goConfig">返回配置中心</el-menu-item>
    </el-menu>
    <div>
      <transition name="el-zoom-in-center">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<style>
  .cfgSystem {
    margin: 10px 10px;
  }

  .title {
    font-size: 20px;
  }
</style>

<script>
  import {mapState, mapMutations} from 'vuex';
  export default {
    data: function () {
      return {
        isRoute: true
      }
    },
    computed: mapState(['context', 'currentEnv', 'env']),
    methods: {
      ...mapMutations(['editContext', 'editCurrentEnv']),
      handleSelect(key) {
        if (key === '/daily') {
          window.location.href = this.env.daily.url;
        } else if (key === '/prepub') {
          window.location.href = this.env.prepub.url;
        } else if (key === '/online') {
          window.location.href = this.env.product.url;
        }
      },
      goConfig(){
        this.editContext(!this.context);
      }
    }
  }
</script>
